<template>
	<div>
		<view class="vehicle-content">
			<div style="text-align: center;padding:30rpx;0">
				<text>{{$t("选择运输工具")}}</text>
			</div>
			<scroll-view @scroll="scroll" scroll-y="true" style="height:750rpx;" :refresher-enabled="true"
				:refresher-triggered="refreshState" @scrolltolower="scrollToBottom" @refresherrefresh="refresh"
				@refresherrestore="finish" :refresher-threshold="50">

				<view v-for="(item,index) in vehicleList" :key="index" @click="checkItem(item,index)"
					class="vehicle-item" :class="{'vehicle-item-active':currentCheckIndex==index}"
					style="margin-bottom: 24rpx;">
					<div class="between" style="align-items: flex-start;">
						<div class="flex">

							<div class="icon">
								<image v-if="item.mode=='汽运'" src="/static/c1.png" style="width: 100%;" mode="widthFix">
								</image>
								<image v-if="item.mode=='火车'" src="/static/c2.png" style="width: 100%;" mode="widthFix">
								</image>
								<image v-if="item.mode=='海运'" src="/static/c3.png" style="width: 100%;" mode="widthFix">
								</image>
								<image v-if="item.mode=='空运'" src="/static/c4.png" style="width: 100%;" mode="widthFix">
								</image>
							</div>

							<div class="info">
								<div class="number">
									{{lang==='zh'?item.name:item.name_ru}}
								</div>
								<div class="type2">
									{{lang==='zh'?item.category.name:item.category.name_ru}}
								</div>
							</div>

						</div>
						<!-- 1空闲 2预定 3订单进行中 -->
						<div class="state" v-if="item.status==1">{{$t("空闲")}}</div>
						<div class="state state-red" v-else>{{$t("订单中")}}</div>
					</div>

					<div class="between flex-end">
						<div class="flex" style="align-items: stretch;">
							<div class="item field" style="width:130rpx;">
								<div class="label">{{$t("载重")}}</div>
								<div class="value">{{item.product_weight}}kg</div>
							</div>
							<div class="item field" style="width:130rpx;">
								<div class="label">{{$t("体积")}}</div>
								<div class="value">{{item.product_volume}}m³</div>
							</div>
							<div class="item field" style="width:170rpx;">
								<div class="label">{{$t("车长")}}</div>
								<div class="value">
									{{item.car_l}}x{{item.car_w}}x{{item.car_h}}
								</div>
							</div>
						</div>

						<div v-if="item.transport_list.length>0" style="font-size: 22rpx;">
							{{$t("可运输路线")}}:
							<text style="font-size: 34rpx;margin-left: 10rpx;">
								<b>{{item.transport_list.length}}</b>
							</text>
						</div>
						<div v-else style="font-size: 24rpx;color:#666">
							{{$t("未设置运输路线")}}
						</div>
					</div>

					<div class="check">
						<div class="arc">
							<image src="/static/success.png" mode="widthFix" style="width: 20rpx;"></image>
						</div>
					</div>

				</view>
				<view style="text-align: center;padding: 20rpx 0;" v-if="nomore">
					<image src="/static/car.png" mode="widthFix" style="width: 350rpx;"></image>
					<view style="color:#99a0ad">{{$t("没有更多了")}}</view>
				</view>
			</scroll-view>
			<div class="between btn-group">
				<div class="btn" :class="{'w-full':empty}" @click="manager">{{$t("管理")}}
				</div>
				<div class="btn submit" v-if="vehicleList.length>0" :class="{op:currentCheckIndex===null}"
					@click="checkItemSubmit">{{$t("确认选择")}}
				</div>
			</div>
		</view>
	</div>
</template>

<script>
	export default {
		props: ["selectVehicle"],
		data() {
			return {
				nomore: false,
				lang: uni.getStorageSync("lang"),
				currentCheckIndex: null,
				count: 0,
				vehicleList: [],
				scrollTop: 0,
				refreshState: false,
				page: 1,
				empty: false
			}
		},
		created() {
			this.getVehicle(true)
		},
		methods: {
			manager() {
				uni.navigateTo({
					url: "/pages/tabbar/order/web"
				})
			},
			finish() {

			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
			scrollToBottom() {
				if (this.nomore) return
				this.page += 1
				this.getVehicle()
			},
			refresh() {
				this.getVehicle(true)
			},
			getVehicle(init) {
				if (init) {
					this.vehicleList = [];
					this.page = 1;
					this.nomore = false;
					this.refreshState = true;
				}
				if (this.nomore) return

				this.$u.api.release.transportVehicle({
					page: this.page,
					status: ""
				}).then(r => {
					this.log("!")
					if (r.list.length == 0) {
						this.nomore = true;
					}
					if (this.page > 1) {
						this.vehicleList = [...this.vehicleList, ...r.list];
					} else {
						this.vehicleList = r.list;
					}
					this.count = r.count;
					this.refreshState = false;
				})
			},
			checkItem(item, index) {
				this.currentCheckIndex = index
			},
			checkItemSubmit() {
				if (this.currentCheckIndex === null) {
					uni.showToast({
						title: this.$t("请选择运输工具"),
						icon: "none"
					})
					return
				}
				this.$emit("checkItemSubmit", this.vehicleList[this.currentCheckIndex]);
				this.$emit("update:selectVehicleShow", false)
			}
		}
	}
</script>

<style lang="scss">
	.vehicle-item {
		background-color: #F6F7FB;
		border-radius: 32rpx;
		width: 90%;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		border: 4rpx solid transparent;
		transition: .3s ease;

		.type2 {
			font-size: 22rpx;
			color: #1d1d1d;
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
			background-color: #1d1d1d;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			margin-right: 16rpx;
			padding: 15rpx;
			box-sizing: border-box;
		}

		.info {
			.number {
				font-size: 28rpx;
			}


		}

		.state {
			background-color: #00a5fd;
			color: #fff;
			font-size: 22rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 4px;
			padding: 8rpx 40rpx;
		}

		.state-red {
			background-color: #F32929;
		}

		.label {
			font-size: 22rpx;
			color: #999;
		}

		.value {
			font-size: 24rpx;
			color: #1d1d1d;
			margin-top: 12rpx;
			padding-right: 10rpx;
			word-break: break-all;
		}

		.btn {
			background-color: #1d1d1d;
			color: #fff;
			margin-top: 12rpx;
		}
	}

	.vehicle-item-active {
		border-color: #5282E6 !important;

		.arc {
			background-color: #5282E6 !important;
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-end {
		margin-top: 24rpx;
		width: 100%;
		align-items: flex-end;
	}

	.check {
		background-color: #fff;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: -40rpx;
		top: 50%;
		transform: translateY(-50%);

		.arc {
			width: 60rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60rpx;
			background-color: #D8D8D8;
		}
	}

	.vehicle-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		margin-top: 40rpx;

		.btn {
			width: 305rpx;
			height: 80rpx;
			border-radius: 50rpx;
			background: #202020;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}

		.submit {
			background-color: #5282E6;
		}
	}

	.field {
		word-break: break-word;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.op {
		opacity: 0.5;
	}

	.w-full {
		width: 100% !important;
	}
</style>